<template>
	<view class="home">
		<view class="top">
			<text v-for="(i,index) in top" :key="index" @click="idx = index" :style="{borderBottom:index===idx?'3px solid #f20713':'#a1aac2',
				color:index===idx?'black':'#a1a1a1',margin:'6px 3px 6px 3px'
				}">
				{{i}}
			</text>
			<image src=" ../../../static/img/1侧边栏.png" class="img" />
		</view>
		<!-- 闲置展示 -->
		<view v-if="idx===0">
			<uni-easyinput prefixIcon="search" @click="Tz" placeholder="搜索" style="width: 95vw;margin-left: 2.5vw;">
			</uni-easyinput>
			<!-- <view class="two">
				<input type="text" placeholder="搜索~" class="sel" @click="Tz">
				<view class="but">搜索</view>
			</view> -->
			<view class="three">
				<view class="item">
					<text class="i" style="color:#a1a1a1 ;">类目:</text>
					<text class="i">电器</text>|
					<text class="i">饮水机</text>|
					<text class="i">热水壶</text>|
					<text class="i">电风扇</text>
					<image src="../../../static/img/清除.png" class="img2"></image>
				</view>
				<text style="color: #e26894;">换一批</text>
			</view>
			<view class="four">
				<text>时间</text>
				<text>价格</text>
				<text>浏览</text>
				<text>兴趣</text>
			</view>
			<view class="content">
				<view class="list" @click="navigateTo(i)" v-for="i in dataTable.list" :key="i">
					<image :src="i.images[0]" class="content-img" @click="handlelocal(i)"></image>
					<text class="text" style="height: 39px;">{{i.desc}}</text>
					<view class="price">
						<view>
							<text style="color: #f20612;font-weight: 600;font-size: 16px;">￥{{i.transfer_price}}</text>
							<text style="font-size: 13px;margin-left: 3px;">{{i.like}}人喜欢</text>
						</view>
						<view style="display: flex;align-items:center;margin-top: 4px;">
							<image src="../../../static/item/眼睛.png" style="width: 18px;height: 20px;" />
							<text>{{i.look_num}}+</text>
						</view>
					</view>
					<view class="bom">
						<view style="display: flex;align-items: center;">
							<image src="../../../static/item/gaga.jpg"
								style="width: 25px;height: 25px;border-radius: 50%;" />
							<text>爱笑的女孩</text>
						</view>
						<image src="../../../static/img/tabbar/guanzhu.png" style="width: 18px;height: 18px;"></image>
					</view>
				</view>
			</view>
		</view>
		<Recovery v-if="idx===1" />
		<Forum v-if="idx===2" />
		<view class="bt" @click="toTop">
			<image src="../../../static/item/返回顶部.svg" class="bt-img" />
		</view>
	</view>
</template>

<script setup>
	import Recovery from './Recovery.vue'
	import Forum from '../zjb/luntan.vue'
	import {
		onMounted,
		reactive,
		ref
	} from 'vue'
	let idx = ref(2)
	let top = ref(['闲置', '回收', '论坛', '校园风云'])
	let Tz = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
	//回到顶部
	let toTop = () => {
		uni.pageScrollTo({
			scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
			duration: 500 // 滚动动画的时长
		})
	}
	//请求数据
	let dataTable = reactive({
		list: [], //数据
	})
	let China = async () => {
		uni.request({
			url: 'http://127.0.0.1:3366/cp/usedgoods',
			method: 'GET',
			success: ({
				data
			}) => {
				console.log('原生的结果', data);
				dataTable.list = data
			},
			fail: (err) => {
				console.log('原生获取失败~');
			}
		})
	}
	//挂载结束请求数据
	import {
		onLoad
	} from "@dcloudio/uni-app"
	onMounted(() => {
		China()
	})
	// onLoad(() => {
	// 	console.log('onshow执行了')
	// 	China()
	// })
	//跳转详情页面
	let navigateTo = (obj) => {
		// console.log(JSON.stringify(obj), '666666666');
		uni.navigateTo({
			url: '/pages/web/twk/detail?id=' + obj._id,
		})
	}

	function handlelocal(item) {
		console.log(item, 'item:::::::::')
		let data = wx.getStorageSync('browse') || []
		data.push(item)
		wx.setStorageSync('browse', data);
	}
</script>

<style scoped>
	.bt {
		position: fixed;
		width: 40px;
		height: 40px;
		left: 86vw;
		top: 85vh;
		z-index: 999;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 8px #c7c7c7;
	}

	.bt-img {
		width: 26px;
		height: 26px;
	}

	.content {
		display: flex;
		/* justify-content: space-around; */
		flex-wrap: wrap;
	}

	.list {
		width: 44vw;
		height: 270px;
		margin: 8px 8px 8px 14px;
		box-sizing: border-box;
		/* border: 1px solid black; */
		overflow: hidden;
		border-radius: 11px;
	}

	.content-img {
		width: 100%;
		height: 170px;
		border-radius: 5px;
	}

	.text {
		font-weight: 600;
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		overflow: hidden;
		-webkit-box-orient: vertical;
	}

	.bom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 6px 0px;
	}

	.price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 13px;
	}

	.but {
		margin-right: 3px;
	}

	.four {
		display: flex;
		justify-content: space-between;
		padding: 0 16px;
		/* 		margin: 0 0 6px 0; */
	}

	.item {
		display: flex;
		width: 80%;
		color: #0c8c4e;
	}

	.i {
		margin: 0 3px 0 3px;
		color: #0c8c4e;
	}

	.three {
		display: flex;
		justify-content: space-around;
		margin: 8px 0 8px 0;
		font-size: 15px;
	}

	.img2 {
		width: 23px;
		height: 23px;
		margin-left: 5px;
	}

	.two {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 12px 0 10px;
	}

	.home {
		height: 100%;
		/* background-color: #edf0f6; */
	}

	.top {
		display: flex;
		justify-content: space-between;
		padding: 8px 8px 8px 8px;
		font-size: 21px;
	}

	.img {
		width: 35px;
		height: 35px;
	}

	.sel {
		border: 1px solid #a1a1a1;
		border-radius: 18px;
		width: 76vw;
		padding: 5px 0 5px 13px;
		/* 	margin: 0 -20px; */
	}
</style>